<template>
    <div>
        <home-header :nav="nav" :logo="logoInfo" @onSearch="onSearch"></home-header>
        <public-top :title="'搜索内容：' + query.q"></public-top>
        <main class="main-box">
            <section class="content-box">
                <div class="content-left">
                    <div v-if="isLoading">
                        正在搜索：{{ query.q }}
                    </div>
                    <article-item :article="searchList"></article-item>
                    <div v-if="searchList.data && searchList.data.length < 5 && moreArticleList.data">
                        <div class="more-title" v-if="!searchList.data">暂无内容 推荐更多文章</div>
                        <div class="more-title" v-else>推荐更多文章</div>
                        <article-item :article="moreArticleList"></article-item>
                    </div>
                </div>
                <div :class="['content-right']">
                    <user-info :userInfo="userInfo"></user-info>
                    <my-label :labels="labels"></my-label>
                    <wbrs :wbrs="wbrs"></wbrs>
                </div>
            </section>
        </main>
        <public-footer :userInfo="logoInfo" :links="links"></public-footer>
        <scoll-top></scoll-top>
    </div>
</template>
<script>
import HomeHeader from '~/components/home-header/index.vue';
import publicFooter from "~/components/public-footer/index.vue";
import publicTop from "~/components/public-top/index.vue";
import scollTop from "~/components/scoll-top/index.vue";
import articleItem from "~/components/article-item/index.vue";
import userInfo from "~/components/user-info/index.vue";
import myLabel from "~/components/my-label/index.vue";
import wbrs from "~/components/wbrs/index.vue";
import request from '~/request/request';
export default {
    async asyncData({ params, app }) {
        let nav = await request('/api/index/getNav');
        let logoInfo = await request('/api/index/getBlogTitle');
        let links = await request('/api/index/getLink');
        let userInfo = await request('/api/index/getMyUserInfo');
        let labels = await request('/api/index/getMyLable');
        let wbrs = await request('/api/index/getHotSearch');
        let searchList = await request('/api/index/search?q=' + params.q);
        let moreArticleList = {};
        if (searchList.data.data && searchList.data.data.length < 5) {
            moreArticleList = await request('/api/article/getArticleAll?page=1&pageSize=5');
            // 去重
            let newArticleList = [];
            for (let i = 0; i < moreArticleList.data.data.length; i++) {
                let item = moreArticleList.data.data[i];
                let isRepeat = false;
                for (let j = 0; j < searchList.data.data.length; j++) {
                    if (item.ID === searchList.data.data[j].ID) {
                        isRepeat = true;
                        break;
                    }
                }
                if (!isRepeat) {
                    newArticleList.push(item);
                }
            }
            moreArticleList.data.data = newArticleList;
        }
        app.head.title = params.q
        return {
            query: params,
            nav: nav.data,
            logoInfo: logoInfo.data,
            links: links.data,
            userInfo: userInfo.data,
            labels: labels.data,
            wbrs: wbrs.data,
            searchList: searchList.data,
            moreArticleList: moreArticleList.data || {}
        }
    },
    components: {
        HomeHeader,
        publicFooter,
        scollTop,
        publicTop,
        articleItem,
        userInfo,
        myLabel,
        wbrs,
    },
    data() {
        return {
            query: {
                q: ''
            },
            nav: [],
            logoInfo: {},
            links: [],
            userInfo: {},
            labels: [],
            wbrs: [],
            searchList: {},
            moreArticleList : {},
            isLoading : false
        }
    },
    mounted() {

    },
    methods: {
        /**搜索*/
        onSearch(value) {
            this.query.q = value;
            this.isLoading = true;
            this.searchList = {};
            request('/api/index/search?q=' + value).then(res => {
                this.searchList = res.data;
                this.isLoading = false;
            })
        }
    }

}
</script>
<style lang="scss" scoped>
.main-box {
    width: 100%;
    background-color: #F8F9FB;
    position: relative;
    z-index: 2;

    .content-box {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding: 20px;

        .content-left {
            width: 79%;
            .more-title {
                font-size: 20px;
                color: #333;
                margin-bottom: 20px;
            }
        }

        .content-right {
            width: 20%;
        }

        .content-right-fixed {
            position: fixed;
            top: -170px;
        }

    }

    @media screen and (max-width: 768px) {
        .content-box {
            display: block;
            box-sizing: border-box;
            padding: 0;

            .content-left {
                width: 100%;
            }

            .content-right {
                display: none;
            }
        }
    }
}
</style>